<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex布局详细教程</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            color: #2c3e50;
            line-height: 1.6;
            padding: 20px;
            min-height: 100vh;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            text-align: center;
            margin-bottom: 40px;
            padding: 30px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        h1 {
            color: #2c3e50;
            margin-bottom: 15px;
        }

        .description {
            color: #7f8c8d;
            max-width: 800px;
            margin: 0 auto;
        }

        .section {
            background: white;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
        }

        .section-title {
            color: #2c3e50;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #eee;
            display: flex;
            align-items: center;
        }

        .section-title i {
            margin-right: 10px;
            color: #3498db;
        }

        .flex-container {
            display: flex;
            gap: 10px;
            padding: 20px;
            background: #f8f9fa;
            border: 2px solid #3498db;
            border-radius: 8px;
            margin: 20px 0;
            min-height: 200px;
        }

        .flex-item {
            padding: 15px;
            background: #3498db;
            color: white;
            border-radius: 5px;
            text-align: center;
            min-width: 80px;
        }

        .item-1 {
            background: #e74c3c;
        }

        .item-2 {
            background: #2ecc71;
        }

        .item-3 {
            background: #f39c12;
        }

        .item-4 {
            background: #9b59b6;
        }

        .item-5 {
            background: #1abc9c;
        }

        .code-block {
            background: #2d3436;
            color: #f5f6fa;
            padding: 20px;
            border-radius: 8px;
            overflow-x: auto;
            margin: 20px 0;
            font-family: 'Consolas', monospace;
            line-height: 1.5;
        }

        .comment {
            color: #dfe6e9;
            opacity: 0.8;
        }

        .property {
            color: #81ecec;
        }

        .value {
            color: #fab1a0;
        }

        .controls {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin: 20px 0;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
        }

        .control-group {
            flex: 1;
            min-width: 200px;
        }

        .control-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .control-group select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .visual-guide {
            display: flex;
            margin: 20px 0;
            padding: 15px;
            background: #f1f2f6;
            border-radius: 8px;
            align-items: center;
        }

        .guide-item {
            flex: 1;
            text-align: center;
            padding: 10px;
        }

        .guide-icon {
            font-size: 24px;
            color: #3498db;
            margin-bottom: 10px;
        }

        .explanation {
            margin-top: 20px;
            padding: 20px;
            background: #e8f4fc;
            border-left: 4px solid #3498db;
            border-radius: 4px;
        }

        .footer {
            text-align: center;
            margin-top: 40px;
            color: #7f8c8d;
            font-size: 0.9em;
        }

        .highlight {
            background: #fff8e1;
            padding: 2px 5px;
            border-radius: 3px;
            font-weight: bold;
        }

        @media (max-width: 768px) {
            .flex-container {
                flex-direction: column;
            }

            .controls {
                flex-direction: column;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <header>
            <h1>Flex布局详细教程</h1>
            <p class="description">掌握Flexbox布局模型，创建灵活且响应式的网页布局</p>
        </header>

        <div class="section">
            <h2 class="section-title"><i class="fas fa-info-circle"></i>Flex布局基础</h2>
            <p>Flexbox是一种一维布局模型，它提供了更加高效的方式来布局、对齐和分配容器中项目之间的空间，即使它们的大小是未知或动态的。</p>

            <div class="visual-guide">
                <div class="guide-item">
                    <div class="guide-icon"><i class="fas fa-arrows-alt-h"></i></div>
                    <p>主轴 (Main Axis)</p>
                </div>
                <div class="guide-item">
                    <div class="guide-icon"><i class="fas fa-arrows-alt-v"></i></div>
                    <p>交叉轴 (Cross Axis)</p>
                </div>
                <div class="guide-item">
                    <div class="guide-icon"><i class="fas fa-box"></i></div>
                    <p>Flex容器</p>
                </div>
                <div class="guide-item">
                    <div class="guide-icon"><i class="fas fa-cube"></i></div>
                    <p>Flex项目</p>
                </div>
            </div>

            <div class="code-block">
                <span class="comment">/* 创建一个Flex容器 */</span><br>
                <span class="property">.container</span> {<br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">display</span>: <span class="value">flex</span>; <span
                    class="comment">/* 或 inline-flex */</span><br>
                }
            </div>

            <div class="explanation">
                <p>Flex布局由<strong>Flex容器</strong>（父元素）和<strong>Flex项目</strong>（子元素）组成。将元素的display属性设置为flex或inline-flex后，它的直接子元素就会自动成为Flex项目。
                </p>
            </div>
        </div>

        <div class="section">
            <h2 class="section-title"><i class="fas fa-sliders-h"></i>Flex容器属性</h2>
            <p>以下属性应用于Flex容器，控制所有Flex项目的整体布局行为。</p>

            <h3>1. flex-direction - 定义主轴方向</h3>
            <div class="controls">
                <div class="control-group">
                    <label for="flexDirection">flex-direction:</label>
                    <select id="flexDirection">
                        <option value="row">row (默认)</option>
                        <option value="row-reverse">row-reverse</option>
                        <option value="column">column</option>
                        <option value="column-reverse">column-reverse</option>
                    </select>
                </div>
            </div>

            <div class="flex-container" id="directionDemo">
                <div class="flex-item item-1">1</div>
                <div class="flex-item item-2">2</div>
                <div class="flex-item item-3">3</div>
                <div class="flex-item item-4">4</div>
            </div>

            <div class="code-block">
                <span class="property">.container</span> {<br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">flex-direction</span>: <span class="value">row</span>;
                <span class="comment">/* 默认值：从左到右 */</span><br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">/* row-reverse: 从右到左 */</span><br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">/* column: 从上到下 */</span><br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">/* column-reverse: 从下到上 */</span><br>
                }
            </div>

            <h3>2. justify-content - 主轴对齐</h3>
            <div class="controls">
                <div class="control-group">
                    <label for="justifyContent">justify-content:</label>
                    <select id="justifyContent">
                        <option value="flex-start">flex-start (默认)</option>
                        <option value="flex-end">flex-end</option>
                        <option value="center">center</option>
                        <option value="space-between">space-between</option>
                        <option value="space-around">space-around</option>
                        <option value="space-evenly">space-evenly</option>
                    </select>
                </div>
            </div>

            <div class="flex-container" id="justifyDemo">
                <div class="flex-item item-1">1</div>
                <div class="flex-item item-2">2</div>
                <div class="flex-item item-3">3</div>
            </div>

            <div class="code-block">
                <span class="property">.container</span> {<br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">justify-content</span>: <span
                    class="value">flex-start</span>; <span class="comment">/* 默认值：从起始位置开始 */</span><br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">/* flex-end: 从结束位置开始 */</span><br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">/* center: 居中 */</span><br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">/* space-between: 项目间等距，两端不留空间 */</span><br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">/* space-around: 项目两侧等距 */</span><br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">/* space-evenly: 所有间隔相等 */</span><br>
                }
            </div>

            <h3>3. align-items - 交叉轴对齐</h3>
            <div class="controls">
                <div class="control-group">
                    <label for="alignItems">align-items:</label>
                    <select id="alignItems">
                        <option value="stretch">stretch (默认)</option>
                        <option value="flex-start">flex-start</option>
                        <option value="flex-end">flex-end</option>
                        <option value="center">center</option>
                        <option value="baseline">baseline</option>
                    </select>
                </div>
            </div>

            <div class="flex-container" id="alignItemsDemo" style="height: 150px;">
                <div class="flex-item item-1" style="height: 60px;">1</div>
                <div class="flex-item item-2" style="height: 90px;">2</div>
                <div class="flex-item item-3" style="height: 40px;">3</div>
                <div class="flex-item item-4" style="height: 70px;">4</div>
            </div>

            <div class="code-block">
                <span class="property">.container</span> {<br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">align-items</span>: <span class="value">stretch</span>;
                <span class="comment">/* 默认值：拉伸以填满容器 */</span><br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">/* flex-start: 从交叉轴起始位置开始 */</span><br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">/* flex-end: 从交叉轴结束位置开始 */</span><br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">/* center: 在交叉轴居中 */</span><br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">/* baseline: 按项目基线对齐 */</span><br>
                }
            </div>

            <h3>4. flex-wrap - 换行控制</h3>
            <div class="controls">
                <div class="control-group">
                    <label for="flexWrap">flex-wrap:</label>
                    <select id="flexWrap">
                        <option value="nowrap">nowrap (默认)</option>
                        <option value="wrap">wrap</option>
                        <option value="wrap-reverse">wrap-reverse</option>
                    </select>
                </div>
            </div>

            <div class="flex-container" id="wrapDemo" style="max-width: 400px;">
                <div class="flex-item item-1" style="min-width: 120px;">1</div>
                <div class="flex-item item-2" style="min-width: 120px;">2</div>
                <div class="flex-item item-3" style="min-width: 120px;">3</div>
                <div class="flex-item item-4" style="min-width: 120px;">4</div>
                <div class="flex-item item-5" style="min-width: 120px;">5</div>
            </div>

            <div class="code-block">
                <span class="property">.container</span> {<br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">flex-wrap</span>: <span class="value">nowrap</span>;
                <span class="comment">/* 默认值：不换行 */</span><br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">/* wrap: 换行 */</span><br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">/* wrap-reverse: 反向换行 */</span><br>
                }
            </div>
        </div>

        <div class="section">
            <h2 class="section-title"><i class="fas fa-cube"></i>Flex项目属性</h2>
            <p>以下属性应用于Flex项目，控制单个项目的布局行为。</p>

            <h3>1. flex-grow - 增长能力</h3>
            <div class="controls">
                <div class="control-group">
                    <label for="item1Grow">项目1 flex-grow:</label>
                    <select id="item1Grow">
                        <option value="0">0 (默认)</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select>
                </div>
                <div class="control-group">
                    <label for="item2Grow">项目2 flex-grow:</label>
                    <select id="item2Grow">
                        <option value="0">0 (默认)</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select>
                </div>
                <div class="control-group">
                    <label for="item3Grow">项目3 flex-grow:</label>
                    <select id="item3Grow">
                        <option value="0">0 (默认)</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select>
                </div>
            </div>

            <div class="flex-container" id="growDemo">
                <div class="flex-item item-1" style="flex-grow: 0;">1 (0)</div>
                <div class="flex-item item-2" style="flex-grow: 0;">2 (0)</div>
                <div class="flex-item item-3" style="flex-grow: 0;">3 (0)</div>
            </div>

            <div class="code-block">
                <span class="property">.item</span> {<br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">flex-grow</span>: <span class="value">0</span>; <span
                    class="comment">/* 默认值：不增长 */</span><br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">/* 正整数：定义项目的增长能力 */</span><br>
                }
            </div>

            <h3>2. flex-shrink - 收缩能力</h3>
            <div class="controls">
                <div class="control-group">
                    <label for="item1Shrink">项目1 flex-shrink:</label>
                    <select id="item1Shrink">
                        <option value="1">1 (默认)</option>
                        <option value="0">0</option>
                        <option value="2">2</option>
                    </select>
                </div>
                <div class="control-group">
                    <label for="item2Shrink">项目2 flex-shrink:</label>
                    <select id="item2Shrink">
                        <option value="1">1 (默认)</option>
                        <option value="0">0</option>
                        <option value="2">2</option>
                    </select>
                </div>
                <div class="control-group">
                    <label for="item3Shrink">项目3 flex-shrink:</label>
                    <select id="item3Shrink">
                        <option value="1">1 (默认)</option>
                        <option value="0">0</option>
                        <option value="2">2</option>
                    </select>
                </div>
            </div>

            <div class="flex-container" id="shrinkDemo" style="max-width: 400px;">
                <div class="flex-item item-1" style="min-width: 150px; flex-shrink: 1;">1 (1)</div>
                <div class="flex-item item-2" style="min-width: 150px; flex-shrink: 1;">2 (1)</div>
                <div class="flex-item item-3" style="min-width: 150px; flex-shrink: 1;">3 (1)</div>
            </div>

            <div class="code-block">
                <span class="property">.item</span> {<br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">flex-shrink</span>: <span class="value">1</span>; <span
                    class="comment">/* 默认值：可以收缩 */</span><br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">/* 0: 防止收缩 */</span><br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">/* 正整数：定义项目的收缩能力 */</span><br>
                }
            </div>

            <h3>3. flex-basis - 初始大小</h3>
            <div class="controls">
                <div class="control-group">
                    <label for="flexBasis">flex-basis:</label>
                    <select id="flexBasis">
                        <option value="auto">auto (默认)</option>
                        <option value="100px">100px</option>
                        <option value="50%">50%</option>
                    </select>
                </div>
            </div>

            <div class="flex-container" id="basisDemo">
                <div class="flex-item item-1" style="flex-basis: auto;">1 (auto)</div>
                <div class="flex-item item-2" style="flex-basis: auto;">2 (auto)</div>
                <div class="flex-item item-3" style="flex-basis: auto;">3 (auto)</div>
            </div>

            <div class="code-block">
                <span class="property">.item</span> {<br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">flex-basis</span>: <span class="value">auto</span>; <span
                    class="comment">/* 默认值：自动大小 */</span><br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">/* 长度值: 例如 100px, 20%, 5rem */</span><br>
                }
            </div>

            <h3>4. align-self - 单独对齐</h3>
            <div class="controls">
                <div class="control-group">
                    <label for="alignSelf">项目2 align-self:</label>
                    <select id="alignSelf">
                        <option value="auto">auto (默认)</option>
                        <option value="flex-start">flex-start</option>
                        <option value="flex-end">flex-end</option>
                        <option value="center">center</option>
                        <option value="baseline">baseline</option>
                        <option value="stretch">stretch</option>
                    </select>
                </div>
            </div>

            <div class="flex-container" id="selfDemo" style="height: 150px; align-items: flex-start;">
                <div class="flex-item item-1" style="height: 60px;">1</div>
                <div class="flex-item item-2" style="height: 90px; align-self: auto;">2</div>
                <div class="flex-item item-3" style="height: 40px;">3</div>
            </div>

            <div class="code-block">
                <span class="property">.item</span> {<br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">align-self</span>: <span class="value">auto</span>; <span
                    class="comment">/* 默认值：继承容器的align-items */</span><br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">/* 其他值同align-items */</span><br>
                }
            </div>
        </div>

        <div class="section">
            <h2 class="section-title"><i class="fas fa-lightbulb"></i>Flex布局实用技巧</h2>

            <div class="explanation">
                <p><span class="highlight">1. 居中元素</span> - 使用Flexbox可以轻松实现水平和垂直居中：</p>
                <div class="code-block">
                    <span class="property">.container</span> {<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">display</span>: <span class="value">flex</span>;<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">justify-content</span>: <span
                        class="value">center</span>; <span class="comment">/* 水平居中 */</span><br>
                    &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">align-items</span>: <span
                        class="value">center</span>; <span class="comment">/* 垂直居中 */</span><br>
                    }
                </div>

                <p><span class="highlight">2. 等高分栏</span> - Flex项目默认等高，非常适合创建等高布局：</p>
                <div class="code-block">
                    <span class="property">.columns</span> {<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">display</span>: <span class="value">flex</span>;<br>
                    }<br>
                    <span class="property">.column</span> {<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">flex</span>: <span class="value">1</span>; <span
                        class="comment">/* 等分剩余空间 */</span><br>
                    }
                </div>

                <p><span class="highlight">3. 响应式布局</span> - 结合媒体查询创建响应式布局：</p>
                <div class="code-block">
                    <span class="property">.container</span> {<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">display</span>: <span class="value">flex</span>;<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">flex-wrap</span>: <span
                        class="value">wrap</span>;<br>
                    }<br>
                    <span class="property">.item</span> {<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">flex</span>: <span class="value">1 1 200px</span>;
                    <span class="comment">/* 基础尺寸200px，可伸缩 */</span><br>
                    }
                </div>
            </div>
        </div>

        <div class="footer">
            <p>Flex布局详细教程 &copy; 2023 | 使用CSS Flexbox创建现代化布局</p>
        </div>
    </div>

    <script>
        // 交互功能实现
        document.getElementById('flexDirection').addEventListener('change', function () {
            document.getElementById('directionDemo').style.flexDirection = this.value;
        });

        document.getElementById('justifyContent').addEventListener('change', function () {
            document.getElementById('justifyDemo').style.justifyContent = this.value;
        });

        document.getElementById('alignItems').addEventListener('change', function () {
            document.getElementById('alignItemsDemo').style.alignItems = this.value;
        });

        document.getElementById('flexWrap').addEventListener('change', function () {
            document.getElementById('wrapDemo').style.flexWrap = this.value;
        });

        // flex-grow 控制
        document.getElementById('item1Grow').addEventListener('change', function () {
            document.querySelector('#growDemo .item-1').style.flexGrow = this.value;
            document.querySelector('#growDemo .item-1').textContent = '1 (' + this.value + ')';
        });

        document.getElementById('item2Grow').addEventListener('change', function () {
            document.querySelector('#growDemo .item-2').style.flexGrow = this.value;
            document.querySelector('#growDemo .item-2').textContent = '2 (' + this.value + ')';
        });

        document.getElementById('item3Grow').addEventListener('change', function () {
            document.querySelector('#growDemo .item-3').style.flexGrow = this.value;
            document.querySelector('#growDemo .item-3').textContent = '3 (' + this.value + ')';
        });

        // flex-shrink 控制
        document.getElementById('item1Shrink').addEventListener('change', function () {
            document.querySelector('#shrinkDemo .item-1').style.flexShrink = this.value;
            document.querySelector('#shrinkDemo .item-1').textContent = '1 (' + this.value + ')';
        });

        document.getElementById('item2Shrink').addEventListener('change', function () {
            document.querySelector('#shrinkDemo .item-2').style.flexShrink = this.value;
            document.querySelector('#shrinkDemo .item-2').textContent = '2 (' + this.value + ')';
        });

        document.getElementById('item3Shrink').addEventListener('change', function () {
            document.querySelector('#shrinkDemo .item-3').style.flexShrink = this.value;
            document.querySelector('#shrinkDemo .item-3').textContent = '3 (' + this.value + ')';
        });

        // flex-basis 控制
        document.getElementById('flexBasis').addEventListener('change', function () {
            const value = this.value;
            const items = document.querySelectorAll('#basisDemo .flex-item');
            items.forEach(item => {
                item.style.flexBasis = value;
                item.textContent = item.textContent.split(' ')[0] + ' (' + value + ')';
            });
        });

        // align-self 控制
        document.getElementById('alignSelf').addEventListener('change', function () {
            document.querySelector('#selfDemo .item-2').style.alignSelf = this.value;
        });
    </script>
</body>

</html>